<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{$item['title']}</title>
<meta name="format-detection" content="telephone=no, address=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="{MODULE_URL}template/resources/js/bootstrap.min.css" rel="stylesheet">
<link href="./resource/css/font-awesome.min.css" rel="stylesheet">
<link href="./resource/css/common.css" rel="stylesheet">

{php echo register_jssdk(false);}
<script type="text/javascript" src="{MODULE_URL}template/resources/js/jquery-2.1.1.min.js"></script>
<script src="{MODULE_URL}template/resources/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{MODULE_URL}template/resources/layui/css/layui.css" media="all">
<script src="{MODULE_URL}template/resources/layui/layui.js"></script>
<script type="text/javascript" src="{MODULE_URL}template/resources/js/let.js"></script>
<link href="{MODULE_URL}template/resources/js/sweetalert.css" rel="stylesheet">
<style>
html{height:100%;}
body{background:{$item['bgcolor']} url({if $item['thumb_bg']}{php echo tomedia($item['thumb_bg'])}{else}{MODULE_URL}template/resources/img/startbg.jpg{/if});}
.gamebody{ width:100%;height:100%;}
.turntablebox{width:90%;margin:20px auto 0 auto; text-align:center; position:relative; overflow:hidden}
#pointerbox{ position:absolute;top:0;}
.infobox{width:96%;margin:30% auto 0 auto; }
.infobox-body{background:url({MODULE_URL}template/img/messagebox2.png) top left repeat-y; background-size:100% auto; text-align:center; padding:10px 0;}
.infobox-footer{background:url({MODULE_URL}template/img/messagebox3.png) bottom left no-repeat; background-size:100% 100%; text-align:center; padding:10px 0 }
.game-info{ margin:0 0 20px 0; background:#FFF;border-radius:5px;padding:2px; text-align:center}
.box{border-radius:5px; font-size:14px;border:1px dashed #CCC;}
.title-brown{padding:0 5px 0 10px;border-radius:3px 3px 3px 0;color:#FFF;height:22px; margin:-1px; width:84px; background:#0D6FB8}
.Detail{ padding:10px 5px;}
.game-btn{ text-align:center;}
.game-btn div[class^='col-']{ padding:0 2px; margin:0;}
.red{color:#F00}
.jbtn{ background:#5CB85C; border:1px solid #4CAE4C;color:#FFF;padding:8px; text-align:center;display:block;width:100%;border-radius:4px;font-size:14px;}
.fansinfobox{ background:rgba(0,0,0,0.6); position:absolute; width:100%; height:100%; z-index:9999; top:0; left:0}
.jinput{background:#FFF; line-height:18px; padding:5px 1%; border-radius:4px; border:1px solid #EEE; display:block; width:98%}
.jpannel{ width:90%; border-radius:8px; border:1px solid #EEE; background:#FFF; margin:30% auto 0 auto}
.jpannel-head{border-top-left-radius:8px;border-top-right-radius:8px; background:#FFF;font-size:14px; font-weight:bold; padding:10px; border-bottom:1px solid #EEE}
.jpannel-foot{border-bottom-left-radius:8px;border-bottom-right-radius:8px; background:#FFF;font-size:14px;padding:10px;border-top:1px solid #EEE}
.jpannel-body{padding:10px;}
.top_img img{ width:100%; margin-bottom:10px;}
#isprizebox .row{ margin-bottom:10px;}
</style>
</head>
<body>
<div class="gamebody">
  <div class="top_img"></div>
  <div class="turntablebox" >
    <div id="turntable" class="turntable"><img src="{if strpos($item['zppic'],'..')}{$item['zppic']}{else}{php echo tomedia($item['zppic'])}{/if}" style="width:100%;"/></div>
    <div id="pointerbox"><img src="{if strpos($item['thumb_pointer'],'..')}{$item['thumb_pointer']}{else}{php echo tomedia($item['thumb_pointer'])}{/if}" id="pointer" onclick="StartGame()" style="width:100%;" /></div>
  </div>
  <div class="game-info" style="margin:20px 10px 10px 10px">
    <div class="box">
        <div class="Detail">剩余游戏机会：<b style="color:#F60" id="gametimes">{$play_count}</b>次</div>
    </div>
  </div>
  <div style=" padding:0 10px">
  <div class="row">
      <div class="col-xs-4">
      	<div class="game-info" onClick="showBox(1)">
          <div class="box">
              <div class="Detail">游戏说明</div>
          </div>
        </div>
      </div>
      <div class="col-xs-4">
      	<div class="game-info" onClick="showBox(2)">
          <div class="box">
              <div class="Detail">奖项说明</div>
          </div>
        </div>
      </div>
      <div class="col-xs-4">
      	<div class="game-info" onClick="showBox(3)">
          <div class="box">
              <div class="Detail">中奖记录</div>
          </div>
        </div>
      </div>
  </div>
  </div>
</div>

<div id="box_isprize" style="display:none;">
	<div style="padding:15px;">
    	<div id="isprizebox">
        	
        </div>
    </div>
</div>
<div id="box_rule" style="display:none;">
	<div style="padding:15px;">
    	{$item['rule']}
    </div>
</div>

<div id="box_prize" style="display:none;">
	<div style="padding:15px;">
    	{loop $prizelist $row}
        <div class="row">
            <div class="col-xs-8">{$row['level']}</div>
            <div class="col-xs-4 text-right">剩：<b>{$row['total']}</b></div>
        </div>
        {/loop}
    </div>
</div>
<div id="box_success" style="display:none;">
	<div style="padding:15px; text-align:center">
    	<div style="margin-bottom:20px; font-size:40px;"><i class="layui-icon" style="font-size: 30px; color:#0F6;">&#xe605;</i></div>
        <div id="content"></div>
    </div>
</div>
<div id="box_false" style="display:none;">
	<div style="padding:15px; text-align:center">
    	<div style="margin-bottom:20px; font-size:40px;"><i class="layui-icon" style="font-size: 30px; color:#F60;">&#xe61c;</i></div>
        <div id="content2"></div>
    </div>
</div>
<script language="javascript">
var isTurn=0;
$(document).ready(function(e) {
	_height=$(window).height();
	$(".gamebody").height(_height-20);
});
layui.use(['layer', 'laypage', 'element','form'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element
  ,form = layui.form;
  form.render();
});
function showBox(type){
	var _height=$(window).height()*0.8;
	var _width=$(window).width()*0.8;
	if(type==1){
		layer.open({
			type: 1,
			title:"规则说明",
			area:[_width+"px",_height+"px"],
			skin: 'layui-layer-rim',
			
			content:$("#box_rule").show(),
			success: function(layero, index){
				
			},
			end:function(){
				$("#box_rule").hide();
			}
		});
	}else if(type==2){
		layer.open({
			type: 1,
			title:"奖项设置说明",
			area:_width+"px",
			skin: 'layui-layer-rim',
			content:$("#box_prize").show(),
			success: function(layero, index){
				
			},
			end:function(){
				$("#box_prize").hide();
			}
		});
	}else if(type==3){
		layer.open({
			type: 1,
			title:"中奖记录",
			area:[_width+"px",_height+"px"],
			skin: 'layui-layer-rim',
			content:$("#box_isprize").show(),
			success: function(layero, index){
				
				var index2=layer.load(1, {shade: [0.5,'#fff']});
				$.post("{php echo $this->createMobileUrl('game',array('op'=>'getgameprize','id'=>$id))}",{},function(data){
					layer.close(index2);
					console.log(data);
					if(data.success){
						var list=data.list;
						var temp='';
						for(var i in list){
							temp+='<div class="row"><div class="col-xs-8">';
							switch(parseInt(list[i].prizetype)){
								case 0:
									temp+=list[i].prizename+'</div><div class="col-xs-4 text-right">';
									if(parseInt(list[i].gettime)){
										temp+='<span class="label label-success">已发放</span>';
									}else{
										temp+='<button type="button" onclick="getmyprize('+list[i].id+')" class="layui-btn layui-btn-primary layui-btn-mini">兑换</button>';
									}
									
								break;
								case 1:
									temp+="微信红包"+'</div><div class="col-xs-4 text-right">￥'+(parseInt(list[i].sncode)*0.01).toFixed(2)+'</b>';
								break;
								case 2:
									temp+="优惠券1张"+'</div><div class="col-xs-4 text-right"> <span class="label label-success">已发放</span>';
								break;
							}
							temp+='</div></div>';
						}
						$("#isprizebox").html(temp);
					}else{
						layer.msg(data.msg,{icon:1,time:2000});
						return;
					}
				},'json');
			},
			end:function(){
				$("#box_isprize").hide();
			}
		});
		
	}
}
function getmyprize(id){
	layer.prompt({title:'请让收银员输入领奖指令', formType:1}, function(pass, index){
		var index2=layer.load(1, {shade: [0.5,'#fff']});
		$.post("{php echo $this->createMobileUrl('game',array('op'=>'getmyprize','id'=>$id))}",{pid:id,pass:pass},function(data){
			layer.close(index2);
			var result=eval("("+data+")");
			if(result.success){
				layer.msg("兑换成功");
				return;
			}else{
				layer.msg(result.msg,{icon:2});
			}
		})
	});
}
function StartGame(){
	var flag2=parseInt("{php echo $flag}");
	if(!flag2){
		layer.msg("您已经没有抽奖机会了哦~");
		return;
	}
	if(isTurn==1)return;
	isTurn=1;
	$("#turntable").removeAttr("style");
	$.post("{php echo $this->createMobileUrl('game',array('op'=>'game','id'=>$id))}",{},function(data){
		console.log(data);
		if(data.err){
			layer.msg(data.msg);
			isTurn=0;
		}else{
			var gametimes=parseInt($("#gametimes").text())-1;
			$("#gametimes").text(gametimes);
			StartTurn(data.deg,data.msg,parseInt(data.is));
			//if(data.cardary)
		}
	},'json');
}

function StartTurn(num,text2,status){
	Let('.turntable')
		.duration(3000)
  		.rotate(360)
		.then()
		.duration(3000)
  		.rotate(3600)
		.then()
		.duration(2000)
		.rotate(360)
		.then()
		.duration(4000)
		.rotate(num)
  	.end(function(){
		var _width=$(window).width()*0.8;
		if(status==1){
			layer.open({
				type: 1,
				title:0,
				area:_width+"px",
				skin: 'layui-layer-rim',
				content:$("#box_success").show(),
				success: function(layero, index){
					$("#content").text(text2);
				},
				end:function(){
					$("#box_success").hide();
				}
			});
		}else{
			layer.open({
				type: 1,
				title:0,
				area:_width+"px",
				skin: 'layui-layer-rim',
				content:$("#box_false").show(),
				success: function(layero, index){
					$("#content2").text(text2);
				},
				end:function(){
					$("#box_false").hide();
				}
			});
		}
		isTurn=0;
	});
}
wx.ready(function () {
	sharedata = {
		title: "{$item['title']}",
		desc: "{$item['sharedes']}",
		imgUrl:"{php echo tomedia($item['clientpic'])}",
		link: "{$_W['siteurl']}",
		success: function(){},
		cancel: function(){}
	};
	wx.onMenuShareAppMessage(sharedata);
	wx.onMenuShareTimeline(sharedata);
	wx.onMenuShareQQ(sharedata);
	wx.onMenuShareWeibo(sharedata);
});
function jumpCardUrl(){
	var iscard=parseInt("{php echo $favorabletype}");
	if(iscard!=3)return;
	wx.addCard({
	cardList: [{
		cardId: '{php echo $cardArry["cardId"]}',
		cardExt: '{"code":"", "openid": "{$cardArry["openid"]}","timestamp":"{$cardArry["timestamp"]}","nonce_str":"{$cardArry["nonceStr"]}", "signature":"{$cardArry["signature"]}"}'
	}],
		success: function (res) {
			var cardList = res.cardList;
		}
	});	
}
</script> 
